<template>
  <div class="repair-dispatch">
    <div class="header">
      <router-link to="/main/wuye/process" class="back-btn">
        <i class="el-icon-arrow-left"></i>
        <span>返回</span>
      </router-link>
      <h2>维修派单</h2>
    </div>

    <div class="content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="待派单" name="pending">
          <el-table :data="pendingList" style="width: 100%">
            <el-table-column prop="repairNo" label="报修编号" width="180"></el-table-column>
            <el-table-column prop="applicant" label="报修人" width="120"></el-table-column>
            <el-table-column prop="repairType" label="报修类型" width="120"></el-table-column>
            <el-table-column prop="urgencyLevel" label="紧急程度" width="120">
              <template slot-scope="scope">
                <el-tag :type="getUrgencyType(scope.row.urgencyLevel)">
                  {{ scope.row.urgencyLevel }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="repairCategory" label="维修类别" width="120"></el-table-column>
            <el-table-column label="操作" width="200">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                <el-button size="mini" type="primary" @click="handleDispatch(scope.row)">派单</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>

        <el-tab-pane label="已派单" name="completed">
          <el-table :data="completedList" style="width: 100%">
            <el-table-column prop="repairNo" label="报修编号" width="180"></el-table-column>
            <el-table-column prop="repairStaff" label="维修人员" width="120"></el-table-column>
            <el-table-column prop="dispatchTime" label="派单时间" width="180"></el-table-column>
            <el-table-column prop="expectedTime" label="预计完成时间" width="180"></el-table-column>
            <el-table-column prop="status" label="状态" width="120">
              <template slot-scope="scope">
                <el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 详情对话框 -->
    <el-dialog title="报修详情" :visible.sync="detailDialogVisible" width="60%">
      <div class="repair-detail" v-if="currentRepair" ref="printArea">
        <!-- 添加打印标题 -->
        <div class="print-header">
          <h1 align="center">深圳市艾美思普科技有限公司</h1>
          <h2 align="center">维修派单</h2>
        </div>
        
        <el-descriptions title="基本信息" :column="2" border>
          <el-descriptions-item label="报修编号">{{ currentRepair.repairNo }}</el-descriptions-item>
          <el-descriptions-item label="报修人">{{ currentRepair.applicant }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ currentRepair.phone }}</el-descriptions-item>
          <el-descriptions-item label="报修位置">{{ currentRepair.location.join(' - ') }}</el-descriptions-item>
          <el-descriptions-item label="报修类型">{{ currentRepair.repairType }}</el-descriptions-item>
          <el-descriptions-item label="紧急程度">{{ currentRepair.urgencyLevel }}</el-descriptions-item>
          <el-descriptions-item label="维修类别">{{ currentRepair.repairCategory }}</el-descriptions-item>
          <el-descriptions-item label="预估费用">{{ currentRepair.estimatedCost }}元</el-descriptions-item>
        </el-descriptions>

        <div class="detail-section">
          <h4>故障描述</h4>
          <p>{{ currentRepair.description }}</p>
        </div>

        <div class="detail-section" v-if="currentRepair.dispatchInfo">
          <h4>派单信息</h4>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="维修人员">{{ currentRepair.dispatchInfo.repairStaff }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ currentRepair.dispatchInfo.staffPhone }}</el-descriptions-item>
            <el-descriptions-item label="派单时间">{{ currentRepair.dispatchInfo.dispatchTime }}</el-descriptions-item>
            <el-descriptions-item label="预计完成时间">{{ currentRepair.dispatchInfo.expectedTime }}</el-descriptions-item>
          </el-descriptions>
          <p v-if="currentRepair.dispatchInfo.remarks" class="dispatch-remarks">
            备注：{{ currentRepair.dispatchInfo.remarks }}
          </p>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="printDetail">打印</el-button>
      </div>
    </el-dialog>

    <!-- 派单对话框 -->
    <el-dialog title="维修派单" :visible.sync="dispatchDialogVisible" width="40%">
      <el-form :model="dispatchForm" label-width="100px">
        <el-form-item label="维修人员">
          <el-select v-model="dispatchForm.repairStaff" placeholder="请选择维修人员">
            <el-option
              v-for="staff in repairStaffList"
              :key="staff.id"
              :label="staff.name"
              :value="staff.name">
              <span>{{ staff.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ staff.type }}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="联系电话">
          <el-input v-model="dispatchForm.staffPhone"></el-input>
        </el-form-item>

        <el-form-item label="预计完成时间">
          <el-date-picker
            v-model="dispatchForm.expectedTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="维修工具">
          <el-select v-model="dispatchForm.tools" multiple placeholder="请选择维修工具">
            <el-option label="扳手" value="扳手"></el-option>
            <el-option label="螺丝刀" value="螺丝刀"></el-option>
            <el-option label="电钻" value="电钻"></el-option>
            <el-option label="万用表" value="万用表"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注说明">
          <el-input type="textarea" v-model="dispatchForm.remarks" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dispatchDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDispatch">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'pending',
      pendingList: [
        {
          repairNo: 'BX202403001',
          applicant: '张三',
          phone: '13800138000',
          location: ['A栋', '1层', '101'],
          repairType: '水电维修',
          urgencyLevel: '紧急',
          repairCategory: '免费维修',
          estimatedCost: 200,
          description: '水管漏水'
        }
      ],
      completedList: [
        {
          repairNo: 'BX202403002',
          repairStaff: '李师傅',
          dispatchTime: '2024-03-15 11:30:00',
          expectedTime: '2024-03-15 15:00:00',
          status: '待维修',
          dispatchInfo: {
            repairStaff: '李师傅',
            staffPhone: '13900139000',
            dispatchTime: '2024-03-15 11:30:00',
            expectedTime: '2024-03-15 15:00:00',
            tools: ['扳手', '螺丝刀'],
            remarks: '请准时完成维修'
          }
        }
      ],
      repairStaffList: [
        { id: 1, name: '李师傅', type: '水电工' },
        { id: 2, name: '王师傅', type: '空调工' },
        { id: 3, name: '张师傅', type: '木工' }
      ],
      detailDialogVisible: false,
      dispatchDialogVisible: false,
      currentRepair: null,
      dispatchForm: {
        repairStaff: '',
        staffPhone: '',
        expectedTime: '',
        tools: [],
        remarks: ''
      }
    }
  },
  methods: {
    getUrgencyType(level) {
      const map = {
        '一般': 'info',
        '紧急': 'warning',
        '特急': 'danger'
      }
      return map[level] || 'info'
    },
    getStatusType(status) {
      const map = {
        '待维修': 'warning',
        '维修中': 'primary',
        '已完成': 'success',
        '已取消': 'info'
      }
      return map[status] || 'info'
    },
    viewDetail(row) {
      this.currentRepair = row
      this.detailDialogVisible = true
    },
    handleDispatch(row) {
      this.currentRepair = row
      this.dispatchForm = {
        repairStaff: '',
        staffPhone: '',
        expectedTime: '',
        tools: [],
        remarks: ''
      }
      this.dispatchDialogVisible = true
    },
    submitDispatch() {
      if (!this.dispatchForm.repairStaff || !this.dispatchForm.expectedTime) {
        this.$message.error('请填写完整信息')
        return
      }

      // TODO: 提交派单信息到后端
      const dispatchInfo = {
        ...this.dispatchForm,
        dispatchTime: new Date().toLocaleString()
      }

      this.currentRepair.dispatchInfo = dispatchInfo
      this.currentRepair.repairStaff = this.dispatchForm.repairStaff
      this.currentRepair.dispatchTime = dispatchInfo.dispatchTime
      this.currentRepair.expectedTime = this.dispatchForm.expectedTime
      this.currentRepair.status = '待维修'

      // 从待派单列表移动到已派单列表
      const index = this.pendingList.findIndex(item => item.repairNo === this.currentRepair.repairNo)
      if (index > -1) {
        this.pendingList.splice(index, 1)
        this.completedList.unshift(this.currentRepair)
      }

      this.$message.success('派单成功')
      this.dispatchDialogVisible = false
    },
    printDetail() {
      const printArea = this.$refs.printArea;
      const vm = this;
      
      // 创建新的打印窗口
      const printWindow = window.open('', '_blank');
      const printContent = `
        <!DOCTYPE html>
        <html>
          <head>
            <title>维修派单</title>
            <style>
              body {
                font-family: SimSun, "宋体", serif;
                margin: 0;
                padding: 20mm;
              }
              .print-container {
                width: 100%;
                max-width: 180mm;
                margin: 0 auto;
                background: white;
              }
              ${document.querySelector('style').textContent}
            </style>
          </head>
          <body>
            <div class="print-container">
              ${printArea.innerHTML}
            </div>
          </body>
        </html>
      `;
      
      // 写入打印内容到新窗口
      printWindow.document.write(printContent);
      printWindow.document.close();
      
      // 等待图片加载完成后打印
      printWindow.onload = function() {
        printWindow.print();
        // 打印完成后关闭打印窗口
        printWindow.onafterprint = function() {
          printWindow.close();
        };
      };
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-dispatch {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    text-align: center;

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
    }

    h2 {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  }

  .detail-section {
    margin-top: 20px;

    h4 {
      margin: 0 0 10px;
      color: #303133;
    }

    p {
      margin: 0;
      color: #606266;
      line-height: 1.6;
    }

    .dispatch-remarks {
      margin-top: 10px;
      font-size: 13px;
    }
  }
}

/* 打印样式 */
@media print {
  body {
    background: white;
    margin: 0;
    padding: 20mm;
  }

  .repair-detail {
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 180mm;
    margin: 0 auto;

    .print-header {
      display: block;
      padding: 10mm 0;
      border-bottom: 2px solid #000;
      margin-bottom: 8mm;
      text-align: center;

      h1 {
        font-size: 22pt;
        margin-bottom: 6mm;
        font-weight: bold;
        text-align: center;
      }

      h2 {
        font-size: 18pt;
        font-weight: bold;
        text-align: center;
      }
    }
  }

  /* 表格样式优化 */
  .el-descriptions {
    margin-bottom: 8mm;
    
    .el-descriptions__header {
      margin-bottom: 4mm;
      text-align: center;
      
      .el-descriptions__title {
        font-size: 14pt;
        font-weight: bold;
        color: #000;
        text-align: center;
        width: 100%;
        display: block;
      }
    }

    .el-descriptions__body {
      width: 100%;

      table {
        width: 100%;
        border-collapse: collapse;
        margin: 0 auto;

        th, td {
          padding: 3mm;
          border: 1px solid #000;
          font-family: SimSun, "宋体", serif !important;
          font-size: 12pt;
          line-height: 1.5;
          text-align: center;
          vertical-align: middle;
        }
        
        th {
          background-color: #f5f5f5 !important;
          font-weight: bold;
          text-align: center;
          width: 25%;
        }
      }
    }
  }

  /* 隐藏不需要打印的元素 */
  .el-dialog__header,
  .el-dialog__footer,
  .dialog-footer {
    display: none !important;
  }

  /* 确保所有文字使用宋体 */
  * {
    font-family: SimSun, "宋体", serif !important;
  }

  /* 页面设置 */
  @page {
    size: A4;
    margin: 0;
  }

  /* 确保打印内容居中 */
  .print-container {
    width: 100%;
    max-width: 180mm;
    margin: 0 auto;
    background: white;
    text-align: center;
  }
}
</style> 